<template>
  <!-- 基金信息 -->
  <div class="fund-info-container">

    <!-- 基金名称和编码 -->
    <span class="fund-title">
      <span>{{ fundBaseMessage.fS_name + ' (' + codeNumber + ')' }}</span><!-- 基金订阅组件完成 -->
      <subscribe class="fund-subscribe" :code-name="fundBaseMessage.fS_name" :code-number="codeNumber" />
    </span>

    <el-row :gutter="5" style="margin-top: 20px">
      <el-col :span="8">
        <div :class="showClass">
          <span class="fund-info-subtitle">净值估算 {{ fundInInTimeGuZhi.gztime }}</span>
          <p class="fund-info-subtitle-v">
            {{ fundInInTimeGuZhi.gsz }}
            <span class="fund-info-subtitle-v2">{{ fundInInTimeGuZhi.gszzl }}</span>
          </p>
        </div>
      </el-col>

      <el-col :span="8">
        <span class="fund-info-subtitle">单位净值 {{ fundInInTimeGuZhi.jzrq }}</span>
        <p class="fund-info-subtitle-v"> {{ fundInInTimeGuZhi.dwjz }}
          <!--          <span class="fund-info-subtitle-v2">{{ fundInInTimeGuZhi.gszzl }}</span> -->
        </p>
      </el-col>

      <el-col :span="8" style="">
        <span style="display:block;width: 100%" class="fund-info-subtitle">购买手续费：
          <span style="text-decoration: line-through;">{{ fundBaseMessage.fund_sourceRate }}%</span>
          <span>{{ fundBaseMessage.fund_Rate }}%</span>
        </span>

        <span style="display:block;width: 100%;margin-top: 5px" class="fund-info-subtitle">起购金额：{{ fundBaseMessage.fund_minsg }}元</span>
      </el-col>
    </el-row>

    <!-- 近期涨幅 -->
    <el-row :gutter="10" style="margin-top: 20px">

      <el-col :span="6">
        <my-card title="近一月" :content="fundBaseMessage.syl_1y" suffix="%" />
      </el-col>

      <el-col :span="6">
        <my-card title="近三月" :content="fundBaseMessage.syl_3y" suffix="%" />
      </el-col>

      <el-col :span="6">
        <my-card title="近六月" :content="fundBaseMessage.syl_6y" suffix="%" />
      </el-col>

      <el-col :span="6">
        <my-card title="近一年" :content="fundBaseMessage.syl_1n" suffix="%" />
      </el-col>

    </el-row>
    <!--    &lt;!&ndash;    <p>持仓股票代码：{{ fundBaseMessage.stockCodes }}</p>&ndash;&gt;-->
    <!--    <p>近一年：{{ fundBaseMessage.syl_1n }}%</p>-->
    <!--    <p>近六月：{{ fundBaseMessage.syl_6y }}%</p>-->
    <!--    <p>近三月：{{ fundBaseMessage.syl_3y }}%</p>-->
    <!--    <p>近一月：{{ fundBaseMessage.syl_1y }}%</p>-->

  </div>
</template>

<script>
import { queryFundBaseMessage, queryFundInInTimeGuZhi } from '@/api/front/fund/fundDataContent'
import Subscribe from '@/views/front/detail/components/subscribe'
import MyCard from '@/views/front/detail/components/info/MyCard'

export default {
  name: 'FundInfoItem',
  components: { MyCard, Subscribe },
  props: {
    codeNumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fundBaseMessage: {},
      // fundInInTimeGuZhi: {
      //   'fundcode': '320007',
      //   'name': '诺安成长混合',
      //   'jzrq': '2021-03-19',
      //   'dwjz': '1.5190',
      //   'gsz': '1.5236',
      //   'gszzl': '0.30',
      //   'gztime': '2021-03-22 15:00'
      // }
      fundInInTimeGuZhi: {}
    }
  },
  computed: {
    showClass() {
      if (Number(this.fundInInTimeGuZhi.gszzl) > 0) {
        return 'largeZero'
      } else if (Number(this.content) < 0) {
        return 'lessZero'
      }
      return ''
    }
  },
  mounted() {
    this.fitchFundBaseMessage()
  },
  methods: {
    // 基金基本信息
    fitchFundBaseMessage() {
      if (this.codeNumber === undefined || this.codeNumber === '') {
        console.log('codeNumber:', this.codeNumber)
      }
      queryFundBaseMessage(this.codeNumber).then(res => {
        // console.log(res)
        this.fundBaseMessage = res
      })
      // 获取基金实时估值
      queryFundInInTimeGuZhi(this.codeNumber).then(res => {
        this.fundInInTimeGuZhi = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.fund-info-container {
  text-align: start;
  height: 316px;

  // 标题
  .fund-title {
    display: block;
    margin: -16px 0 0;
    height: 54px;
    line-height: 54px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    //display: inline;
    white-space: pre-wrap;

    border-bottom: 1px solid #dcdfe6;
  }

  .fund-subscribe {
    margin-left: 5px;
  }

  .fund-info-subtitle {
    font-family: PingFangSC-Medium;
    font-size: 15px;
    color: #666666;
    letter-spacing: 0;
    line-height: 30px;
    box-sizing: border-box;
  }

  .fund-info-subtitle-v {
    white-space: nowrap;
    margin: 0;
    font-family: PingFangSC-Medium !important;
    font-size: 28px;
    //color: #333333;
    letter-spacing: 0;
    line-height: 40px;
    width: auto;
    box-sizing: border-box;
  }

  .fund-info-subtitle-v2 {
    margin-left: 5px;
    font-family: PingFangSC-Medium;
    font-size: 12px;
    //color: #333333;
    letter-spacing: 0;
    line-height: 18px;
    box-sizing: border-box;
  }
}

.largeZero{
  color: red;
}

.lessZero{
  color: green;
}
</style>
